<template>
    <div class="login_page">
        <div class="login_box">
            <!-- tou -->
            <div class="box-img">
                <img src="../assets//logo.png" alt="">
            </div>
            <!-- denglu -->
        <el-form ref="form"  :model="lableForm" :rules="lableFormRules" label-width="0" class="login_form">
            <!-- yonghu -->
        <el-form-item prop="uname">
            <el-input prefix-icon="iconfont icon-user" v-model="lableForm.uname"></el-input>
        </el-form-item>
        <!-- mima -->
        <el-form-item prop="psd">
            <el-input prefix-icon="iconfont icon-3702mima" v-model="lableForm.psd" type="password"></el-input>
        </el-form-item>
        <!-- anniu -->
        <el-form-item class="btn">
            <el-button type="primary" @click="login">登录</el-button>
            <el-button type="info" @click="reset">重置</el-button>
        </el-form-item>
        </el-form>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      lableForm: {
        uname: '',
        psd: ''
      },
      lableFormRules: {
        uname: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        psd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    reset () {
      this.$refs.form.resetFields()
    },
    login () {
      this.$refs.form.validate(viad => {
        if (!viad) return console.log('验证失败')
        // if(viad)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.login_page{
    height: 100vh;
    background: palevioletred;
    position: relative;
    .login_box{
        width: 400px;
        height: 350px;
        background: yellowgreen;
        border-radius: 4px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        .box-img{
            width: 130px;
            height: 130px;
            background: white;
            border: 10px solid gray;
            border-radius: 50%;
            overflow: hidden;
            position: absolute;
            left: 50%;
            transform: translate(-50%,-50%);
            img{
                width: 100%;
            }
        }
        .login_form{
            position: absolute;
            width: 100%;
            padding: 0 8px;
            bottom: 0;
            box-sizing: border-box;
            .btn{
                display: flex;
                justify-content: flex-end;

            }
        }
    }
}
</style>
